<template>
  <div class="field">
    <naviber />
    <div class="table">
      <!-- <img src="@/assets/images/news_table.png" alt /> -->
      <p>{{ text }}</p>
    </div>
    <div class="two_nav">
      <div class="two_nav_title">专业领域</div>
      <div class="item_box">
        <swiper ref="swiper_aboutUs" :options="swiperOption">
          <swiper-slide
            class="swiper-slide"
            v-for="(item, index) in cate"
            :key="index"
            :class="[{ 'router-link-active': item.id == cid }, 'two_nav_item']"
          >
            <div
              @click="onTowNav(item.id, item.title)"
              :to="{ name: 'zh_lectureHall' }"
              class="two_nav_item"
            >
              <span style="white-space:nowrap;">{{ item.title }}</span>
            </div>
          </swiper-slide>
        </swiper>
        <!-- 箭头左 -->
        <div
          id="swiper-button-prev"
          class="swiper-button-prev"
          slot="button-prev"
        ></div>
        <!-- 箭头右 -->
        <div
          id="swiper-button-next"
          class="swiper-button-next"
          slot="button-next"
        ></div>
      </div>
    </div>
    <div class="knowledge">
      <div class="knowledge_list" v-html="content"></div>

      <div class="folding">
        <div class="folding_title">相关案例</div>
        <!-- folding_active -->
        <div
          v-for="(item, index) in relatedList"
          @click="onRelatedList(item.id)"
          :key="index"
          class="folding_item"
        >
          <div>{{ item.title }}</div>
        </div>
      </div>
    </div>
    <footer_></footer_>
  </div>
</template>
<script>
import naviber from "../naviber/naviber";
import footer_ from "../footer/footer";
import { service_cate, service_list, service_visit } from "@/api/field.js";
export default {
  data() {
    return {
      cid: "",
      cate: [],
      content: "",
      relatedList: [],
      text: "",
      swiperOption: {
        slidesPerView: "auto",
        spaceBetween: 0,
        //设置点击箭头
        navigation: {
          nextEl: "#swiper-button-next",
          prevEl: "#swiper-button-prev"
        },
        bserver: true, //修改swiper自己或子元素时，自动初始化swiper
        observeParents: true, //修改swiper的父元素时，自动初始化swiper
        //鼠标变成抓手型
        grabCursor: true
      }
    };
  },
  components: {
    naviber,
    footer_
  },
  mounted() {
    if (this.$store.state.headTitle.FieldCurrentCHS) {
      this.cid = this.$store.state.headTitle.FieldCurrentCHS;
    } else {
      this.cid = this.$store.state.headTitle.field_cate.CHS[0].id;
    }

    if (this.$store.state.headTitle.field_cate.CHS) {
      this.cate = this.$store.state.headTitle.field_cate.CHS;
      this.getService_list(this.cid);
    } else {
      service_cate({ cid: this.cate.id }).then(res => {
        this.cate = res.data.data.CHS;
        this.cid = this.cate[0].id;
        this.$commit("changeFieldCate", res.data.data);
        this.getService_list(this.cate[0].id);
      });
    }

    try {
      this.text = this.$router.query.textTitle;
    } catch (error) {
      let index = this.cate.findIndex(item => item.id == this.cid);
      this.text = this.cate[index].title;
    }
  },
  methods: {
    // 确保 this.cate 存在  顾点击直接请求
    onTowNav(cid, text) {
      this.text = text;
      this.$store.commit("changeFieldCurrentCHS", cid);
    },
    //点击侧边导航栏  相关案例
    onRelatedList(id) {
      this.$router.replace({
        name: "zh_fieldDetails",
        query: { id: id, cid: this.cid }
      });
    },
    //进入详情页
    // onRelated(id) {
    //   this.$router.push({ name: "zh_fieldDetails", query: { id: id } });
    // }
    // 加载列表数据
    getService_list(cid) {
      service_list({ cid: cid || this.cate[0].id }).then(res => {
 if (this.$isMobile()) {
        this.content = this.$pxToRem(res.data.cateInfo.content);
      } else {
       this.content = res.data.cateInfo.content;
      }
        

        this.relatedList = res.data.data;
      });
    }
  },
  watch: {
    "$store.state.headTitle.FieldCurrentCHS"(newValue, obdValue) {
      this.cid = newValue;
      this.getService_list(newValue);
    },
    "$route.query.cid": {
      deep: true,
      handler: function(newValue, obdValue) {
        let index = this.cate.findIndex(item => item.id == this.cid);
        this.text = this.cate[index].title;
      }
    }
  }
};
</script>
<style scoped src="./sass/field.css"></style>
